<template>
  <div class="container">
    <!-- 顶部全局组件 -->
    <HospitalTop></HospitalTop>
    <!-- 展示路由组件的区域 -->
    <div class="content">
      <!-- 展示一级路由组件 -->
      <router-view v-slot="{ Component }">
        <transition
          name="animate__animated "
          enter-active-class="animate__fadeIn"
          leave-active-class="animate__fadeOut"
        >
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
    <!-- 底部全局组件 -->
    <HospitalBottom></HospitalBottom>
    <!-- 登录组件 -->
    <Login v-if="showLogin" />
  </div>
</template>

<script setup lang="ts" name="App">
import Login from '@/components/Login/index.vue'
import { storeToRefs } from 'pinia'
import useUserStore from './store/modules/user'
// 获取用户仓库中的数据 showLogin控制对话框的显示与隐藏
const { showLogin } = storeToRefs(useUserStore())
</script>

<style scoped lang="scss">
.container {
  .content {
    width: 1200px;
    padding-top: 70px;
    min-height: 600px;
    margin: 0 auto;
    overflow: hidden;
  }
}
.animate__animated {
  // 覆盖默认的过渡时间
  --animate-duration: 0.5s;
}
</style>
